import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
import { Toast, NavBar, Grid, Button, Tabs, Typography } from 'react-vant';
import { Checked, Label, Location, Arrow, YouzanShield } from '@react-vant/icons';
import { Popup, Popover, } from 'react-vant'
import '../css/cell.css'
export default function Cell() {
    const jump = useNavigate()
    const [car, setcar] = useState([])
    const [sum, setsum] = useState(0)
    const getCar = async () => {
        let { data: { carlist } } = await axios.get('http://localhost:3000/carlist')
        setcar(carlist)
        setsum(carlist.filter(i => i.checked == true).reduce((pre, item) => pre + item.price * item.discount, 0))
    }
    useEffect(() => {
        getCar()
    }, [])

    const [state, setState] = useState('')
    const onClose = () => setState('')

    const popupActions = [{ text: '微信支付' }, { text: '支付宝支付' }];
    const [pay,setpay]=useState('微信支付')
    const select = (option) => setpay(option.text);
    return (
        <div>
            <NavBar
                title="确认下单"
                leftText="返回"
                onClickLeft={() => (jump(-1))}
            />
            <div id="custom">
                <div className='custom_left'>
                    <Location fontSize={20} color='tomato' />
                </div>
                <div className='custom_middle'>
                    <p>张三  178-6666-8888</p>
                    <p>广东-广州-天河区 五山路388号</p>
                </div>
                <div className='custom_right'>
                    <Arrow fontSize={20} />

                </div>
            </div>
            <div id="list">
                {car.filter(i => i.checked == true).map(item => (
                    <div id="message" key={item._id}>
                        <div id="message_author">
                            <div id='msg_author'>

                                <div id="msg_photo">
                                    <img src="./vite.svg" alt="" />
                                </div>
                                <div id="msg_con">
                                    <p >{item.author}</p>
                                    <p style={{ fontSize: '12px' }}>刚刚来过</p>
                                </div>
                                <YouzanShield />学生认证
                            </div>
                            <div id='msg_detail'>
                                <div id="dta_book">
                                    <div id="bookleft">
                                        <img src={item.image} alt="" />
                                    </div>
                                    <div id="bookright">
                                        <p>{item.name}</p>
                                        <p><Label />{item.pinxiang}</p>
                                        <p><Location />{item.location}&emsp;支持自提</p>
                                        <p style={{ color: 'tomato' }}>￥{item.price * item.discount}&emsp;&emsp;<span style={{ textDecoration: 'line-through', color: 'black' }}>￥{item.price}</span>&emsp;&emsp;<span style={{ fontSize: '13px', color: 'black' }}>xxx人想要</span></p>
                                    </div>
                                </div>
                                <div id="dta_function">
                                    <span style={{ color: 'tomato' }}>配送方式</span>
                                    <span>自提￥0.00<Arrow style={{ paddingTop: '10px', fontSize: '20px' }} /></span>
                                </div>
                            </div>

                        </div>
                    </div>
                ))}
            </div>
            <div id="pay">
                <Popup
                    visible={state === 'bottom'}
                    style={{ height: '30%' }}
                    position='bottom'
                    onClose={onClose}
                    description={
                        <div className='popup'>
                            <p>
                                <span onClick={() => { setState('') }}>X</span>
                                <span>确认付款</span>
                                <span></span>
                            </p>
                            <h4>￥{sum}</h4>
                            <p style={{ justifyContent: 'space-around' }}>
                                <span style={{ color: 'tomato' }}>支付方式</span>
                                <span>{pay}</span>
                            </p>
                            <br />
                            <hr />
                            <button>立即付款</button>
                        </div>
                    }
                />

                <div id="func">
                    <span style={{ color: 'tomato' }}>支付方式</span>
                    <Popover
                        placement="bottom"
                        actions={popupActions}
                        onSelect={select}
                        reference={<span >{pay}<Arrow style={{ paddingTop: '10px', fontSize: '20px' }} /></span>}
                    />

                </div>
                <div id="payfor">
                    <span style={{ fontSize: '20px' }}>合计：￥{sum}</span>
                    <Button type='warning' style={{ marginTop: '17px', borderRadius: '10px' }} onClick={() => setState('bottom')}>确认下单</Button>
                </div>
            </div>
        </div>
    )
}
